<template>
	<div class="highSearch" v-show='highSearch'>
		<div class="content">
			<h3>
			高级筛选
			<i class="el-icon-close" @click ='highSearch = false'></i>
			</h3>
			<div class="search-table">			
				<el-form :inline="true" :model="formInline" ref='formInline' class="demo-form-inline" label-width='120px'>
					
					<div class="search-item">	
						<div class="range">
							<el-form-item label="年龄" prop='age.value' label-width='133px'>
								<el-select v-model="formInline.age.value" placeholder="请选择" size='mini'>
								<el-option label="请选择" value=""></el-option>
								<el-option label="18岁以下" value="18岁以下"></el-option>
								<el-option label="19-40岁" value="19-40岁"></el-option>
								<el-option label="41-60岁" value="41-60岁"></el-option>
								<el-option label="60岁以上" value="60岁以上"></el-option>
							</el-select>
							</el-form-item>
						</div>
						<div class="range">
							<el-form-item label="身高(cm)" prop='height.value' label-width='92px'>
								<el-select v-model="formInline.height.value" placeholder="请选择" size='mini'>
								<el-option label="请选择" value=""></el-option>
								<el-option label="160以下" value="160以下"></el-option>
								<el-option label="160-170" value="160-170"></el-option>
								<el-option label="170-180" value="170-180"></el-option>
								<el-option label="180以上" value="180以上"></el-option>
							</el-select>
							</el-form-item>
						</div>
						<div class="range">
							<el-form-item label="体重(kg)" prop='weight.value' label-width='122px'>
								<el-select v-model="formInline.weight.value" placeholder="请选择" size='mini'>
								<el-option label="请选择" value=""></el-option>
								<el-option label="45以下" value="45以下"></el-option>
								<el-option label="45-55" value="45-55"></el-option>
								<el-option label="55-70" value="55-70"></el-option>
								<el-option label="70-80" value="70-80"></el-option>
								<el-option label="80-100" value="80-100"></el-option>
								<el-option label="100以上" value="100以上"></el-option>
							</el-select>
							</el-form-item>
						</div>
					</div>
					<div class="search-item">
						<el-form-item label="性别" prop='sex.value' label-width='130px'>
							<el-select v-model="formInline.sex.value" placeholder="请选择" size='mini'>
								<el-option label="请选择" value=""></el-option>
								<el-option label="男" value="男"></el-option>
								<el-option label="女" value="女"></el-option>
								<el-option label="未知" value="未知"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="血型" prop='blood.value' label-width='90px'>
							<el-select v-model="formInline.blood.value" placeholder="请选择" size='mini'>
								<el-option label="请选择" value=""></el-option>
								<el-option label="A" value="A"></el-option>
								<el-option label="B" value="B"></el-option>
								<el-option label="AB" value="AB"></el-option>
								<el-option label="O" value="O"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="既往移植史" prop='past.value' label-width='130px'>
							<el-select v-model="formInline.past.value" placeholder="请选择" size='mini'>
								<el-option label="请选择" value=""></el-option>
								<el-option label="有" value="有"></el-option>
								<el-option label="无" value="无"></el-option>
							</el-select>
						</el-form-item>
						<!-- <el-form-item label="Rh血型鉴定" prop='Rhblood.value'>
							<el-select v-model="formInline.Rhblood.value" placeholder="请选择" size='mini'>
								<el-option label="请选择" value=""></el-option>
								<el-option label="阴性" value="阴性"></el-option>
								<el-option label="阳性" value="阳性"></el-option>
							</el-select>
						</el-form-item>	 -->
					</div>
					<div class="search-item">
						<el-form-item label="替代治疗方式" prop='replace.value' label-width='130px'>
							<el-select v-model="formInline.replace.value" placeholder="请选择" size='mini'>
								<el-option label="请选择" value=""></el-option>
								<el-option label="腹部透析" value="腹部透析"></el-option>
								<el-option label="血液透析" value="血液透析"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="原发疾病" prop='primary.value' label-width='90px'>
							<el-select v-model="formInline.primary.value" placeholder="请选择" size='mini'>
								<el-option label="请选择" value=""></el-option>
								<el-option label="慢性肾炎" value="慢性肾炎"></el-option>
								<el-option label="尿毒症" value="尿毒症"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="伴随发疾病" prop='accompany.value'>
							<el-select v-model="formInline.accompany.value" placeholder="请选择" size='mini'>
								<el-option label="请选择" value=""></el-option>
								<el-option label="糖尿病" value="糖尿病"></el-option>
								<el-option label="高血压" value="高血压"></el-option>
							</el-select>
						</el-form-item>
					</div>
					<div class="search-item">
						<el-form-item label="PRA" prop='PRA.value' label-width='98px'>
							<el-select v-model="formInline.PRA.value" placeholder="请选择" size='mini'>
								<el-option label="请选择" value=""></el-option>
								<el-option label="全阴性" value="全阴性"></el-option>
								<el-option label="全阳性" value="全阳性"></el-option>
								<el-option label="labScreen-l-DX阳性" value="labScreen-l-DX阳性"></el-option>
								<el-option label="labScreen-ll-DX阳性" value="labScreen-ll-DX阳性"></el-option>
							</el-select>
						</el-form-item>
						
						<el-form-item label="术前四项" prop='preoperative.value' label-width='90px'>
							<el-select v-model="formInline.preoperative.value" placeholder="请选择" size='mini'>
								<el-option label="请选择" value=""></el-option>
								<el-option label="全阴" value="全阴"></el-option>
								<el-option label="阳性-乙肝" value="阳性乙肝"></el-option>
								<el-option label="阳性-丙肝" value="阳性-丙肝"></el-option>
								<el-option label="阳性-HIV" value="阳性-HIV"></el-option>
								<el-option label="阳性-梅毒" value="阳性-梅毒"></el-option>
							</el-select>
						</el-form-item>
					</div>
					<div class="search-item">
						<div class="data">
							<el-form-item label="登记日期" prop='data.newValue' label-width='100px' >
								<el-date-picker
								v-model="formInline.data.newValue"
								type="daterange"
								placeholder="选择日期范围"
								size='mini'
								@change='timeChange'
								range-separator=' 至 '>
							</el-date-picker>
						</el-form-item>
						</div>	
						
					</div>
					<div class="search-button">
					 <el-form-item>
					    <el-button type="primary" @click.stop.prevent="submitForm('formInline')">搜索</el-button>				    
					  </el-form-item>
					  <span @click="resetForm('formInline')" class="reset">重置</span>
					  </div>
				</el-form>
			</div>
		</div>
	</div>
</template>
<style lang='scss' rel='stylesheet/scss'>
	.highSearch{
		position: absolute;
		font-size: 12px;
		color: #666666;
		left: 50%;
		margin-top: 60px;
		margin-left: -350px;
		z-index: 1000;
		width: 680px;
		background-color: #fff;
		border-radius: 3px;
		h3{
			position: relative;
			height: 36px;
			line-height: 36px;
			background-color: #06aea6;
			color:#ffffff;
			text-align: center;
			font-size: 14px;
			i{
				position: absolute;
				right: 10px;
				top: 10px;
				cursor: pointer;
			}
		}
		.search-table{
			padding: 20px 10px;
			border: 1px solid #999999;
			border-top:none;
		}	
		form{
			.search-item{
				display: flex;
				justify-content: space-between;
				.data{
					.el-form-item{
						margin-right: 0;
						.line{
							text-align: center;
						}
					}
				}
				.el-form-item{
					display: flex;
					.el-input{
						.el-input__icon+.el-input__inner{
							padding-right: 10px;
						}
					}
					label{
						font-size: 12px;
					}
					.line{
						font-size: 12px;
					}
				}
				.range{			
					display: flex;
					.el-input__inner{
						
					}
				}
			}
			.search-button{
				display: flex;
				justify-content: center;
				button{
					width: 100px;
				}
				.el-form-item{
					margin-left: 30px;
				}
				.reset{
					font-size: 14px;
					color: #3f8de1;
					line-height: 36px;
					cursor: pointer;
				}
			}
		}		
	}
</style>

<script>
	export default {
		data() {
			return {
				highSearch: false,
				formInline: {
					primary:{
						label:'原发疾病',
						value:''
					} ,
					accompany:{
						label:'伴随发疾病',
						value:''
					},
					preoperative:{
						label:'术前四项',
						value:''
					},
					blood:{
						label:'血型',
						value:''
					},
					replace:{
						label:'替代治疗方式',
						value:''
					},
					PRA:{
						label:'PRA',
						value:''
					},
					past:{
						label:'既往移植史',
						value:''
					},
					age:{
						label:'年龄',
						value:''
					},
					weight:{
						label:'体重',
						value:''
					},
					height:{
						label:'身高',
						value:''
					},
					sex:{
						label:'性别',
						value:''
					},
					data:{
						label:'登记日期',
						newValue:'',
						value:''
					}					
				}			
			}
		},
		methods: {
			show() {
				this.highSearch =true;
			},
			timeChange(date){
				if(date){
					this.formInline.data.value =date;
				}else{
					this.formInline.data.value ='';
				}		
			},
			submitForm(formName) {
				console.log(this.formInline.data.value)
				this.$emit('formData', this.formInline);
				this.highSearch =false;
				
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.$emit('reset');
			}
		}
	}
</script>
